什麼是 Badging API

Badging API 讓 App 能夠顯示通知數字，不過通知數字的位置會依照平台的不同而有所差異。

• 常見是用來通知用戶，像是訊息或是推播數量都能夠透過這個通知數字來實現
  • Email 未讀、訊息未讀
  • 待辦事項
  • 遊戲任務
• 不需要任何使用者權限即可使用
• 支援 Windows、macOS、Chrome 81+、Edge 84+

Badging API (圖片來源: https://web-dev)

Badging API 推播網頁實做

其實實作上蠻容易的，就是只要有 API 存在就可以設定，沒有則代表不行。

1. App 需要被安裝，被安裝過後就會出現在 App 列表中

• 可以用手機或電腦打開後點選安裝 https://linyencheng.github.io/pwa-badging-api/

2. 開啟 PWA 測試 Badging API

• 直接叫用設定
• 透過 Service Worker 叫用設定

注意事項

• 99 以上會被改成 99+ 所以如果不想顯示 99+ 也可以自行改成 99
• Chrome App Badging API 要求 App 要先被安裝
• 背景執行也支援透過 service worker 去叫用，所以可以整合推播

跨瀏覽器支援的寫法，在前景透過程是直接叫用，就是先判斷有沒有這個 API 原則上有就是可以設定。

function setBadge(...args) {
  if (navigator.setAppBadge) {
    navigator.setAppBadge(...args);
  } else if (navigator.setExperimentalAppBadge) {
    navigator.setExperimentalAppBadge(...args);
  } else if (window.ExperimentalBadge) {
    window.ExperimentalBadge.set(...args);
  }
}

function clearBadge() {
  if (navigator.clearAppBadge) {
    navigator.clearAppBadge();
  } else if (navigator.clearExperimentalAppBadge) {
    navigator.clearExperimentalAppBadge();
  } else if (window.ExperimentalBadge) {
    window.ExperimentalBadge.clear();
  }
}

透過 Service Worker，也是一樣先進行判斷後直接叫用，有就可以設定。

let requestCounter = 0;

self.addEventListener('fetch', function(e) {
  if ('setAppBadge' in navigator) {
    navigator.setAppBadge(++requestCounter);
  }
  console.log('[Service Worker] Fetch', e.request.url);
  e.respondWith(fetch(e.request));
});